import React, { useState, useEffect } from 'react';
import { useSearchParams, useNavigate } from "react-router-dom";
import { Image, List, Switch } from "antd-mobile";
import { UpOutline, DownOutline, UnlockOutline, RightOutline } from 'antd-mobile-icons'
import './BookChapter.scss';
import SearchNav from '../../components/SearchNav/SearchNav';
function BookChapter(props) {
   const [searchParams, setSearchParams] = useSearchParams();
   const [chapter, setChapter] = useState(null);
   // 文章  顺序倒叙 数据
   const [cnums, setCnums] = useState(null);
   // 顺序  倒叙
   const [sortest, setSortest] = useState('顺序')
   let navigate = useNavigate();
   // id
   let id = searchParams.get('id');
   useEffect(() => {
      React.axios.get('reader/book/info.json', {
         params: { source_uuid: id },
      }).then(res => {
         console.log(res);
         setChapter(res)
         setCnums(res.catalog)
      })
   }, [id]);
   // 倒叙
   useEffect(() => {
      setTimeout(() => {
         setCnums([...cnums].reverse())
      })
   }, [sortest])
   // console.log('id----', id);
   return chapter && cnums && (
      <div>
         <SearchNav />

         <div className='book_chapter'>

            {/* 小说基本信息 */}
            <div className="novel_msg">
               <Image
                  src={chapter.book.coverImage + "?imageView&thumbnail=240y336"}
                  width={16 + "vw"}
                  height={16 * 1.4 + "vw"}
                  style={{ borderRadius: 4 }}
                  fit="fill"
                  lazy={true}
               />
               <div className="info_user">
                  <p className="info_1">{chapter.book.title}</p>
                  <p className="info_2">{chapter.book.author}</p>
               </div>
            </div>
            {/* 多章 排序 */}
            <div className="novels">
               <div className="novel_sort">
                  <span className="nums">共{chapter.catalog.length}章</span>
                  <div className="sort_txt" onClick={() => setSortest(`${sortest == '顺序' ? '倒叙' : '顺序'}`)}>
                     {sortest}&nbsp;
                     {/* style={{ fontWeight:'bold' }} */}
                     {sortest == '倒叙' ? <UpOutline /> : <DownOutline />}
                  </div>
               </div>
            </div>
            <div className="novel_list">
               {
                  cnums.map((item) => (
                     <List key={item.uuid} header={item.grade == 1 ? item.title : null}
                        style={{ "--font-size": '14px' }}>
                        {item.grade == 2 &&
                           <List.Item onClick={() => { navigate("/book/read?bookId=" + id + "&chapterId=" + item.secId) }}
                              arrow={item.needPay == true ? <UnlockOutline /> : <RightOutline />}
                              disabled={item.needPay == false ? false : true}>
                              {item.title}
                           </List.Item>
                        }
                     </List>
                  ))
               }

            </div>
         </div>
      </div>
   );
}

export default BookChapter;